
<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="位置监控" name="first">
        <el-table
          :data="loactiondata"
          @row-dblclick="rowClick"
          :header-cell-style="{
            background: '#f2f2f2',
            color: '#333',
            fontSize: '12px',
          }"
          size="mini"
          height="200px"
          style="width: 100%"
        >
          <el-table-column
            label="序号"
            type="index"
            fixed
            width="50"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="hbCarNo"
            label="车牌"
            align="center"
            fixed
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="gpsTime"
            label="时间"
            align="center"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="alarmStateInfo"
            label="车辆报警"
            align="center"
            width="150"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column prop="isOnline" label="在线状态" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.isOnline == 1 ? "在线" : "离线" }}</span>
            </template>
          </el-table-column>
          <el-table-column label="ACC状态" align="center" prop="accState">
            <template slot-scope="scope">
              <span>{{ scope.row.accState == 1 ? "ACC开" : "ACC关" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="speed" label="速度" align="center">
          </el-table-column>
          <el-table-column
            prop="direction"
            label="方向"
            align="center"
            width="100"
          >
          </el-table-column>
          <el-table-column
            prop="simNumber"
            label="SIM卡"
            width="130"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="terminalCode"
            label="终端编号"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="oil" label="总油量"> </el-table-column>
          <el-table-column prop="mileage" label="总里程"> </el-table-column>
          <!-- <el-table-column
            prop="mileage"
            label="当日里程"
            align="center"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop=""
            label="当月里程"
            align="center"
            :show-overflow-tooltip="true"
          >
          </el-table-column> -->
          <el-table-column prop="lng" label="经度" width="100" align="center">
          </el-table-column>
          <el-table-column prop="lat" label="纬度" width="100" align="center">
          </el-table-column>
          <el-table-column
            prop="curAddress"
            label="位置"
            width="500"
            align="center"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @current-change="handleCurrentChange"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="loactionList.length"
          >
          </el-pagination>
        </div>
      </el-tab-pane>

      <el-tab-pane label="报警信息" name="second">
        <el-table
          :data="alarmInfoData"
          :header-cell-style="{
            background: '#f2f2f2',
            color: '#333',
            fontSize: '12px',
          }"
          size="mini"
          height="200px"
          style="width: 100%"
        >
          <el-table-column label="序号" type="index" width="50" align="center">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="hbCarNo" label="车牌" align="center" width="">
          </el-table-column>
          <el-table-column
            prop="terminalCode"
            label="终端编号"
            align="center"
            width=""
          >
          </el-table-column>
          <el-table-column
            prop="alarmStateInfo"
            label="消息类别"
            align="center"
            width=""
          >
          </el-table-column>
          <el-table-column
            prop="alarmStateInfo"
            label="消息详情"
            align="center"
            width=""
          >
          </el-table-column>
          <el-table-column prop="gpsTime" label="时间" align="center" width="">
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @current-change="handleCurrentChangeWarn"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="alarmInfoList.length"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  props: {
    tableData: [],
  },
  data() {
    return {
      page: {
        pageSize: 10,
        pageNumber: 1,
        getList: this.getrecord,
      },
      flay: true,
      // 底部列表
      activeName: "first",

      loactionList: [],
      loactiondata: [],
      alarmInfoList: [],
      alarmInfoData: [],
    };
  },
  computed: {
    locationCar() {
      return this.$store.state.updatecompanySearchCar;
    },
  },
  watch: {
    // locationCar(val) {
    tableData(val) {
      if (val.length > 0) {
        this.loactionList = val;
        this.alarmInfoList = [];
        val.forEach((e) => {
          if (e.alarmStateInfo) {
            this.alarmInfoList.push({
              hbCarNo: e.hbCarNo,
              alarmStateInfo: e.alarmStateInfo,
              terminalCode: e.terminalCode,
              gpsTime: e.gpsTime,
            });
          }
        });
      } else {
        this.loactionList = [];
      }
      this.getrecord(this.page);
      this.getrecordWarn(this.page);
    },
  },
  methods: {
    getdata(val) {
      console.log("===接收", val);
      // this.loactiondata = val;
      this.tableData = val;
    },
    handleCurrentChange(val) {
      this.page.pageNumber = val;
      this.getrecord(this.page);
    },
    getrecord(e) {
      let arr = [];
      for (
        let i = e.pageSize * (e.pageNumber - 1);
        i < e.pageSize * e.pageNumber;
        i++
      ) {
        if (this.loactionList[i]) {
          arr.push(this.loactionList[i]);
        }
      }
      this.$set(this, "loactiondata", arr);
      this.flay = false;
      this.$nextTick(() => {
        this.flay = true;
      });
    },
    //报警信息分页
    handleCurrentChangeWarn(val) {
      this.page.pageNumber = val;
      this.getrecordWarn(this.page);
    },
    getrecordWarn(e) {
      let arr = [];
      for (
        let i = e.pageSize * (e.pageNumber - 1);
        i < e.pageSize * e.pageNumber;
        i++
      ) {
        if (this.alarmInfoList[i]) {
          arr.push(this.alarmInfoList[i]);
        }
      }
      this.$set(this, "alarmInfoData", arr);
      this.flay = false;
      this.$nextTick(() => {
        this.flay = true;
      });
    },
    handleClick(tab, event) {
      //console.log(tab, event);
    },
    rowClick(e) {
      console.log(e);
      // let arr = this.$store.state.updatecompanySearchCar.filter((i, t) => {
      //   return i.carNo == e.carNo;
      // });
      // let arr1 = this.$store.state.updatecompanySearchCar.filter((i, t) => {
      //   return i.carNo != e.carNo;
      // });
      // let newArr = arr.concat(arr1);
      // this.$store.commit("clickAompanySearchCar", newArr);

      // 传值给父级，控制地图的显示层级和中心点
      this.$emit("getBaseTableClicked", e);
    },
  },
  mounted() {
    // //console.log(this.height)
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-table .cell  {
  white-space: pre-line !important;
}
::v-deep .el-table__row td {
  padding: 1 !important;
}
</style>
